<script setup>
const props = defineProps({
  items: {
    type: Array,
    default: () => [
      {
        tab: '文章1',
        content: '文章1的内容'
      },
      {
        tab: '文章2',
        content: '文章2的内容'
      },
      {
        tab: '文章3',
        content: '文章3的内容'
      },
      {
        tab: '文章4',
        content: '文章4的内容'
      },
      {
        tab: '文章5',
        content: '文章5的内容'
      }
    ]
  }
})

// 生成唯一的 name 属性值，避免多个组件冲突
const groupName = `tab-group-${Math.random().toString(36).substr(2, 9)}`
</script>

<template>
  <div class="tab-container">
    <!-- 动态生成 radio 和 label -->
    <template v-for="(item, index) in items" :key="index">
      <input
        type="radio"
        :name="groupName"
        :id="`${groupName}-${index}`"
        :checked="index === 0"
      />
      <label :for="`${groupName}-${index}`" class="tab">
        {{ item.tab }}
      </label>
    </template>

    <!-- 内容区域 -->
    <div class="form-bar">
      <div v-for="(item, index) in items" :key="index" class="form-content">
        {{ item.content }}
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.tab-container {
  width: 100%;
  margin-bottom: 60px;
  overflow: hidden;
  color: #000;
  .tab {
    display: inline-block;
    background: #fff;
    font-size: 18px;
    box-sizing: border-box;
    padding: 16px;
    text-align: center;
    width: 100px;
    cursor: pointer;
  }

  // 使用通用选择器替代动态生成的选择器
  input[type='radio'] {
    display: none;

    &:checked + .tab {
      background: #eee;
      cursor: default;
    }
  }

  // 为每个radio创建对应的transform规则
  input[type='radio'] {
    @for $i from 0 through 9 {
      &:nth-of-type(#{$i + 1}):checked ~ .form-bar {
        transform: translateX(calc(-100% * #{$i}));
      }
    }
  }

  .form-bar {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 100%;
  }

  .form-content {
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    padding: 20px;
  }
}
</style>
